<template>
	<div>
		<!--blur 鼠标失去焦点 focus获取焦点,,change失去焦点,数据需要改变 ,keydown,input,keyup 键帽 弹起 -->
		<input type="text" @blur="myblur" @focus="myfocus" @input="myinput" @keydown="mykeydown" @keyup="mykeyup" @change="mychange" />
		<div @click="myclick" >我是div1</div>
		<div>我是div2</div>
	</div>
</template>

<script setup>
	// vue里边没有dom的操作,通过改变数据,来改变页面样式
	import { ref, reactive } from 'vue'
	let myclick = function (event) {
		console.log(event.target);
		let dom = event.target
		dom.innerHTML=''
	}
	let myblur = function () {
		console.log("myblur");
	}
	let myfocus = function () {
		console.log("myfocus");
	}
	// 输入数据的时候回执行
	let myinput = function () {
		console.log("input");
	}
	let mykeydown = function () {
		console.log("mykeydown");
	}
	let mykeyup= function () {
		console.log("mykeyup");
	}
	let mychange = function () {
		console.log("mychange");
	}

</script>

<style scoped>
	.red {
		color: red;
	}
	.bg{
		background: #000;
	}
</style>
